import React from 'react';
// 密码登录组件
// 引入验证码组件
import Captcha from '@/components/Captcha';
import { Button, Form, Input, Space, message } from 'antd';
// 引入图标组件
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
// 引入状态hook
import { useState } from 'react';

// 导入密码登录接口
import { normalloginFn } from '@/api/login';

// 导入两个两个hook 用来操作redux 
import { useSelector, useDispatch } from 'react-redux';

// 导入路由的相关的hook
import { useHistory } from 'react-router-dom'

// 导入 hook 钩子 ref 
import { useRef } from 'react'


const NormalLogin = () => {
    const [key, setKey] = useState('');
    // 创建dispatch 方法
    const dispatch = useDispatch();

    // 创建his 对象
    const his = useHistory() // 相当于类组件中 this.props.history

    // 创建ref 对象
    const ref1 = useRef();
    // 获取form 表单实例(antd form 表单提供的方法)
    const [form] = Form.useForm();

    // 登录验证成功执行的函数
    const onFinish = (values) => {
        // 将key 属性添加到 values 对象中
        values.key = key
        // console.log('Success:', values);
        //接下来调用登录接口
        normalloginFn(values).then(res => {
            console.log('res', res);
            //01: jwt 已经在响应拦截器中存到本地了
            //02: 将acl 当前用户的菜单项存到redux(已经进行了持久化配置)
            if (res.data.errNo == 0) {
                // 登录成功
                dispatch({ type: 'updateAcl', payload: res.data.context.acl })
                // 提示登录成功
                message.success('登录成功', 1, () => {
                    // 03: 跳转到首页
                    his.push('/dashboard')
                })
            } else {
                // 登录失败
                // console.log('登录失败');
                // 希望重新更新验证码(不用我手动点了),并且将输入框中上一次输入的结果清空
                ref1.current.loadashFn();
                // 清空表单项
                // console.log('form实例', form);
                // 提示登录失败
                message.error(res.data.errText, 1, () => {
                    form.setFieldsValue({
                        username: '',
                        password: '',
                        captcha: ''
                    })
                })

            }

        })

    };
    // 登录验证失败执行的函数
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    // 定义一个savekey 函数
    const saveKey = (key) => {
        // console.log('父组件savekey执行', key);
        setKey(key)
    }
    return (
        <div>
            <Form
                name="basic"
                wrapperCol={{
                    span: 24,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                size='large'
                form={form}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                    ]}
                >
                    <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="密码" />
                </Form.Item>
                <Space>
                    <Form.Item
                        name="captcha"
                        rules={[
                            {
                                required: true,
                                message: '请输入图形验证码!',
                            },
                        ]}
                    >
                        <Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
                        {/* 验证码组件 */}
                        {/* <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha> */}
                    </Form.Item>
                    <Form.Item>
                        {/* 验证码组件 */}
                        <Captcha h={38} saveKey={saveKey} ref={ref1}></Captcha>
                    </Form.Item>
                </Space>
                <Form.Item
                    wrapperCol={{
                        span: 24,
                    }}
                >
                    <Button type="primary" htmlType="submit" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default NormalLogin;
